{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>股票信息平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row mr-1">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="{% url 'index' %}"><img src="{% static 'images/logo.svg' %}"
                                                                                 alt="logo"/></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>

        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <ul class="navbar-nav mr-lg-4 w-100">
                <li class="nav-item nav-search d-none d-lg-block col-lg-10">
                    <div class="input-group">
                        <div class="input-group-prepend">
                <span class="input-group-text" id="search">
                  <i class="mdi mdi-magnify"></i>
                </span>
                        </div>
                        <input id="bookName" type="text" class="form-control grid-margin"
                               placeholder="输入实体名称进行检索" style="width: 400px">
                    </div>
                </li>
                <li class="nav-item col-lg-2">
                    <button class="btn btn-inverse-primary col-12" type="button" id="searchBtn">搜索</button>
                </li>
            </ul>

            <ul class="navbar-nav navbar-nav-right">
                {% if request.user_obj %}
                    <ul class="nav-item nav-profile dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                            <i class="mdi mdi-account menu-icon"></i>
                            <span class="nav-profile-name">{{ request.user_obj.username }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right navbar-dropdown"
                             aria-labelledby="profileDropdown">
                            <li class="dropdown-item">
                                <i class="mdi mdi-settings text-primary"></i>
                                <a href="#">管理中心</a>
                            </li>
                            <li class="dropdown-item">
                                <i class="mdi mdi-logout text-primary"></i>
                                <a href="{% url 'logout' %}">退 出</a>
                            </li>
                        </div>
                    </ul>
                {% else %}
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'login' %}">
                            <span>登录</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'register' %}">
                            <span>注册</span>
                        </a>
                    </li>
                {% endif %}

            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li id="home" class="nav-item">
                    <a class="nav-link" href={% url 'index' %}>
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">首页</span>
                    </a>
                </li>
                <li id="stock" class="nav-item">
                    <a class="nav-link" href={% url 'stock' %}>
                        <i class="mdi mdi-circle-outline menu-icon"></i>
                        <span class="menu-title">个股</span>
                    </a>
                </li>
                <li id="industry" class="nav-item">
                    <a class="nav-link" href={% url 'industry' %}>
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">行业</span>
                    </a>
                </li>
                <li id="stock_index" class="nav-item">
                    <a class="nav-link" href={% url 'stock_index' %}>
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">指数</span>
                    </a>
                </li>
                <li id="company" class="nav-item">
                    <a class="nav-link" href={% url 'company' %}>
                        <i class="mdi mdi-grid-large menu-icon"></i>
                        <span class="menu-title">公司</span>
                    </a>
                </li>
                <li id="concept" class="nav-item">
                    <a class="nav-link" href={% url 'concept' %}>
                        <i class="mdi mdi-emoticon menu-icon"></i>
                        <span class="menu-title">概念</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                        <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="auth">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"><a class="nav-link" href="{% url 'register' %}"> 注册 </a></li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'login' %}"> 登录 </a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}"> 退出 </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li id="qa_chat" class="nav-item">
                    <a class="nav-link" href={% url 'qa_chat' %}>
                        <i class="mdi mdi-file-document-box-outline menu-icon"></i>
                        <span class="menu-title">智能问答</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin">
                        <div class="d-flex justify-content-between flex-wrap">
                            <div class="d-flex align-items-end flex-wrap">
                                <div class="d-flex">
                                    <i class="mdi mdi-home text-muted hover-cursor"></i>
                                    <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;首页&nbsp;/&nbsp;</p>
                                    <p class="text-primary mb-0 hover-cursor">Analytics</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="col-md-12 stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-title">Entity list</p>
                                        <div class="table-responsive">
                                            <table border="1" class="table table-hover table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>代码</th>
                                                    <th>名称</th>
                                                    <th>类型</th>
                                                </tr>
                                                </thead>
                                                <tbody id="trs">
                                                {% for obj in table_data %}
                                                    <tr>
                                                        <td>{{ forloop.counter }}</td>
                                                        <td>{{ obj.code }}</td>
                                                        <td>{{ obj.name }}</td>
                                                        <td>{{ obj.label }}</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                            <div>
                                                <td>
                                                    <button class="btn" id="prePage" type="button">上一页</button>
                                                </td>
                                                <td>
                                                    <input class="btn" id="currentPage" type="button" value="当前第1页">
                                                </td>
                                                <td>
                                                    <button class="btn" id="nextPage" type="button">下一页</button>
                                                </td>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <p class="card-title">mapping knowledge domain</p>
                                <div class="col-md-12 grid-margin stretch-card">
                                    <form action="/app01/example/" method="post" class="col-lg-12 col-12">
                                        <div class="row">
                                            <div class="col-lg-9 col-md-12"> <!-- 设置一行内显示的宽度 -->
                                                <ul class="navbar-nav mr-lg-4">
                                                    <li class="nav-item nav-search d-none d-lg-block">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                    <span class="input-group-text" id="search">
                                                                      <i class="mdi mdi-magnify"></i>
                                                                    </span>
                                                            </div>
                                                            <input class="form-control grid-margin" type="text"
                                                                   name="node" placeholder="输入实体名称进行检索">
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-3 col-md-12"> <!-- 设置查询按钮的宽度 -->
                                                <ul class="navbar-nav">
                                                    <li class="nav-item">
                                                        <input class="btn btn-inverse-primary" type="submit"
                                                               value="查询">
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                                {% if ctx and not flag %}
                                    <div style="width: 800px;height: 700px;display: flex;align-items: center;text-align: center;line-height: 704px;">
                                        <h1>该数据库中未添加该实体</h1>
                                    </div>
                                {% else %}
                                    <div id="container_search"
                                         class="col-md-12 grid-margin stretch-card" style="height:800px "></div>
                                {% endif %}
                            </div>

                        </div>
                    </div>

                </div>


            </div>
            <!-- content-wrapper ends -->
            <!-- partial:partials/_footer.html -->
            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">06 组 赵文琳 叶晓萱 秦红 饶书琪 </span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"></span>
                </div>
            </footer>
            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="{% static 'vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="{% static 'vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'vendors/datatables.net/jquery.dataTables.js' %}"></script>
<script src="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.js' %}"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap4.js' %}"></script>
<script type="text/javascript">
    {#设置列表#}
    window.onload = function () {
        var currentPage = document.getElementById("currentPage").value;
        var intPage = parseInt(currentPage.replace(/[^\d]/g, " "));
        console.log(currentPage.replace(/[^\d]/g, " "))
        // 数据表
        var table = document.getElementById("trs");
        // 页数
        var count = Math.ceil(table.rows.length / 10);
        var $loadBtn = document.getElementById("currentPage");
        var table_length = table.rows.length;
        var search = new Array(table_length);
        for (i = 0; i < table_length; i++) {
            search[i] = i;
        }
        var begin = (intPage - 1) * 10;
        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].style.display = 'none'
        }
        for (var r = begin; r < begin + 10; r++) {
            table.rows[r].style.display = '';
        }

        function prePage() {
            console.log('pre')
            // 到了第一页无法点击
            if (intPage <= 1) {
                alert("已是第一页！")
                // $("#prePage").attr("disabled", "disabled");
            } else {
                intPage--;
                currentPage = String(intPage);
                $loadBtn.value = "当前第" + currentPage + "页";
                paging();
            }
        }

        function nextPage() {
            console.log('next')
            // 到了最后一页无法点击
            if (intPage >= count) {
                alert("已是最后一页！")
                // $("#prePage").attr("disabled", "disabled");
            } else {
                intPage++;
                currentPage = String(intPage);
                $loadBtn.value = "当前第" + currentPage + "页";
                paging();
            }
        }

        function paging() {
            var begin = (intPage - 1) * 10;
            for (var i = 0; i < search.length; i++) {
                table.rows[search[i]].style.display = 'none'
            }
            for (var r = begin; r < begin + 10; r++) {
                if (r >= search.length) {
                    break;
                }
                table.rows[search[r]].style.display = '';
            }
        }

        function searchBtn() {
            var keyword = document.getElementById("bookName").value;
            var ele;
            search = [];
            for (var r = 0; r < table.rows.length; r++) {
                ele = table.rows[r].innerHTML;
                var displayStyle = 'none';
                if (ele.indexOf(keyword) >= 0) {
                    displayStyle = '';
                    search.push(r);
                }
                table.rows[r].style.display = displayStyle
            }
            intPage = 1;
            currentPage = String(intPage);
            $loadBtn.value = "当前第" + currentPage + "页";
            count = Math.ceil(search.length / 5)
            paging();
        }

        document.getElementById("prePage").addEventListener('click', prePage);
        document.getElementById("nextPage").addEventListener('click', nextPage);
        document.getElementById("searchBtn").addEventListener('click', searchBtn);
    }

    {#查询所有#}
    var neo4j_data = [{{ neo4j_data|safe }}]
    var data1 = neo4j_data[0]['data']
    var links1 = neo4j_data[0]['links']
    console.log(data1)
    console.log(links1)
    var myChart1 = echarts.init(document.getElementById('container_search'));
    var categories1 = [{name: "公司"}, {name: "行业"}, {name: "实例"}];
    option1 = {
        // 图的标题
        title: {
            text: '股票信息图谱'
        },
        // 提示框的配置
        tooltip: {
            position: [10, 10],
            formatter: function (params) {
                const data = params.data;
                const des = data.des;
                // 生成表格代码
                let tableHTML = '<div style="max-width: 300px; word-wrap: break-word; white-space: pre-wrap;">';
                // 设置最大宽度为 200 像素，并允许换行

                for (const key in des) {
                    if (des.hasOwnProperty(key)) {
                        const value = des[key];
                        tableHTML += `<div>${key}: ${value}</div>`;
                    }
                }
                tableHTML += '</div>';
                return tableHTML;
            }
        },


        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories1.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },

            // 数据
            data: data1,
            links: links1,
            categories: categories1,
        }]
    };
    myChart1.clear()
    myChart1.setOption(option1);

    var search_neo4j_data = [{{ search_neo4j_data|safe }}]
    var data2 = search_neo4j_data[0]['data']
    var links2 = search_neo4j_data[0]['links']
    console.log(data2)
    console.log(links2)
    var categories2 = [{name: "公司"}, {name: "行业"}, {name: "概念"}, {name: "股票"}, {name: "指数"}, {name: "高管"}, {name: '股东'}];
    option2 = {
        // 图的标题
        title: {
            text: '查询实体关系图谱'
        },
        // 提示框的配置
        tooltip: {
            position: [10, 10],
            formatter: function (params) {
                const data = params.data;
                const des = data.des;
                // 生成表格代码
                let tableHTML = '<div style="max-width: 300px; word-wrap: break-word; white-space: pre-wrap;">';
                // 设置最大宽度为 200 像素，并允许换行

                for (const key in des) {
                    if (des.hasOwnProperty(key)) {
                        const value = des[key];
                        tableHTML += `<div>${key}: ${value}</div>`;
                    }
                }
                tableHTML += '</div>';
                return tableHTML;
            }
        },

        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories2.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },

            // 数据
            data: data2,
            links: links2,
            categories: categories2,
        }]
    };
    myChart1.clear()
    myChart1.setOption(option2);

</script>
<!-- End custom js for this page-->
</body>

</html>


